<template>
  <n-config-provider class="z-40 px-2 fixed top-0 animate-sidebar" :style="{ width: '100vw', margin: '0', padding: '0' }">
    <div style="height: 15vh;z-index: 999;width: 100vw;margin-bottom: 10px;" class="fixed flex items-center ">
      <div class="text-white flex justify-between items-center  h-full w-full">
        <div class=" p-4">
          <div class="flex justify-center items-center">
            <img style="box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);width: 5vw;height: 5vw;
                 border-radius: 50%;"
                 src="../../../public/logo.png"
            >
            <div class="ml-2" style="display: flex;flex-direction: column;align-items: center;">
              <div style="font-size: 29PX;">康复诊疗排班系统</div>
              <div style="font-size: 16PX;">KANG FU ZHEN LIAO PAI BAN</div>
            </div>
          </div>
        </div>
        <div class="nav-box rebutton"
             @click="nav(props.value)"
        >
          返回首页
        </div>
      </div>
    </div>
  </n-config-provider>
</template>

<script lang="ts" setup>
import {
  NIcon, NConfigProvider, NGradientText, NButton
} from 'naive-ui'
import {
  Menu, Home
} from '@vicons/ionicons5'
import type { MenuOption } from 'naive-ui'
import { nav, getClientKVCache, setClientKVCache } from '../../shared/client/window'
import { ref, h, onMounted } from 'vue'
import { char400 } from '../../shared/theme/color'

interface Option { label: string, value: string }
const tabs = ref<Option[]>([])
const props = defineProps({
  name: {
    type: String,
    required: true
  },

  value: {
    type: String,
    required: true
  },

  isTelescreen: {
    type: Boolean,
    required: false,
    default: () => false
  }
})

let moduleMapping: Record<string, { label: string, icon: any, children?: any }>

const allMapping = {
  '/display/inTime': { label: '实时数据总览' },
  '/display/trend': { label: '趋势总览' },
  '/display/tab': { label: '用户标签管理' },
  '/display/group': { label: '用户群组' },
  '/display/goods': { label: '商品动销' },
  '/doctor/department': { label: '部门管理' },
  '/doctor/job': { label: '岗位管理' },
  '/doctor/user': { label: '用户管理' },
  '/doctor/role': { label: '角色管理' },
  '/analysis': { label: '归因分析' },
}

const appMapping: Record<string, { label: string, icon: any, children?: any }> = {
  '/display/data': {
    label: '我的总览', icon: Home, children: [
      { label: '实时数据总览', key: '/display/inTime' }, { label: '趋势总览', key: '/display/trend' }
    ]
  },
  '/display/user': {
    label: '用户管理', icon: Home, children: [
      { label: '用户标签管理', key: '/display/tab' }, { label: '用户群组', key: '/display/group' }
    ]
  },
  '/display/Goods': {
    label: '商品概览', icon: Home, children: [
      { label: '商品动销', key: '/display/goods' }
    ]
  },
  '/doctor': {
    label: '系统管理', icon: Home, children: [
      { label: '部门管理', key: '/doctor/department' },
      { label: '岗位管理', key: '/doctor/job' },
      { label: '用户管理', key: '/doctor/user' },
      { label: '角色管理', key: '/doctor/role' }
    ]
  }
}

const analysisMapping: Record<string, { label: string, icon: any, children?: any }> = {
  '/analysis': { label: '归因分析', icon: Home }
}

const menuOptions = ref<MenuOption[]>([])

function computeMenuOptions() {
  menuOptions.value = Object.keys(moduleMapping).map(key => ({
    label: moduleMapping[key].label,
    key,
    children: moduleMapping[key]?.children,
    icon: () => h(NIcon, null, { default: () => h(moduleMapping[key].icon) })
  }))
}

const projectOptions = [
  {
    label: '金融物流',
    key: ''
  }
]

onMounted(() => {
  if (!import.meta.env.SSR) {

  }
})

</script>

<style>
.nav-box {
  padding: 0.5rem;
  margin-right: 2.5rem;
  cursor: pointer;
  /* border-bottom-width: 2px; */
  border-color: transparent;
  color: white;
  font-style:italic;
  /* transition: border-color 0.3s ease; */
  transition: transform 0.4s;
}

.nav-box:hover {
  transform: scale(1.1);
  /* 鼠标悬停时放大 1.1 倍 */

}

.rebutton {
  border: 1px solid white;
  border-radius: 30px;
  background: linear-gradient(to bottom, #2195d3, #87CEFA);
  padding: 5px 20px;
}

.animate-sidebar {
  transition: 0.3s all ease;
}

.n-gradient-text {
  font-size: 32px;
  background: linear-gradient(to bottom, #22e839, #e0ee1a);
  background-clip: text;
  color: transparent;
  font-style: italic;
  font-weight: bold;
  font-family:cursive;
}

/* 滚动条轨道样式 */
:root {
  --scrollbar-bg: rgb(1 2 3 / 40%);
}

::-webkit-scrollbar {
  z-index: 999;
  width: 10px;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-bg);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgb(1 2 3 / 50%);
}
</style>
